<script setup>


//表单数据
import {reactive} from "vue";
import {MessagePlugin} from "tdesign-vue-next";

const formData = reactive(({
  IpStatus: false,
  model: 'black',
  IPNames: ""
}))

// 保存数据
const onSubmit = ({validateResult, firstError}) => {
  if (validateResult === true) {
    MessagePlugin.success('提交成功');
  } else {
    console.log('Validate Errors: ', firstError, validateResult);
    MessagePlugin.warning(firstError);
  }
};
</script>

<template>
  <t-card shadow style="width: 100%;">
    <template #header>
      <h1 align="center">IP防火墙设置</h1>
    </template>

    <t-form @submit="onSubmit">
      <t-form-item label="IP防火墙状态" name="IPStatus">
        <t-switch v-model="formData.IpStatus" size="large">
          <template #label="slotProps">{{ slotProps.value ? '开' : '关' }}</template>
        </t-switch>
      </t-form-item>
      <t-form-item label="模式" name="model">
        <t-radio-group v-model="formData.model" variant="primary-filled" default-value="1">
          <t-radio value="black">黑名单</t-radio>
          <t-radio value="white">白名单</t-radio>
        </t-radio-group>
      </t-form-item>
      <t-form-item label="IP名单" name="IPNames">
        <t-textarea placeholder="每行填写一个ip,多个ip用换行符隔开"/>
      </t-form-item>

      <t-form-item>
        <t-space size="small">
          <t-button theme="primary" type="submit">保存</t-button>
        </t-space>
      </t-form-item>
    </t-form>


  </t-card>

</template>

<style scoped>

</style>
